<!--
  试听音频
-->
<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import { nextTick, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dialog = ref(null);
import utils from "@/common/utils/utils";

const audioUrl = ref(null)
const audioRef = ref(null)
const isClose = () => {
  audioRef.value && audioRef.value.pause();
}
const showModal = (url) => {
  dialog.value.showModal();
  audioUrl.value = url
  nextTick(() => {
    audioRef.value && audioRef.value.play();
  })
};
const closeModal = () => {
  dialog.value.closeModal();
};




defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div>
    <baseModel ref="dialog" :contentWidth="'520px'" :maskClosable="true" @isClose="isClose">
      <template #title>
        <span style="font-weight: 600;">音频试听</span>
      </template>

      <template #content>
        <div class="content">
          <audio ref="audioRef" :src="audioUrl" controls></audio>
        </div>
      </template>
      <template #footer>
        <div class="bottom">
          <a-button type="primary" class="btn" key="back" style="margin-right: 10px" @click="closeModal">关闭</a-button>

        </div>
      </template>
    </baseModel>
  </div>
</template>

<style lang="less" scoped>
@fontColor: #1c1f23;

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;

  audio {
    width: 90%;
  }

  .btns {
    display: flex;
    justify-content: center;
  }

  h2 {
    color: #1c1f23;
    font-size: 20px;
    font-weight: 600;
    margin: 15px 0;
  }
}

.bottom {
  display: flex;
  justify-content: flex-end;
}
</style>
